<template>
  <div class="user">
    <!-- 顶部搜索区域 -->
    <el-card>
      <el-form v-model="searchDate" label-width="100px" class="demo-ruleForm">
        <el-row class="demo-ruleForm-row">
          <el-col :span="6">
            <el-form-item label="登录账号" prop="account">
              <el-input placeholder="请输入登录账号" v-model="searchDate.account" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名" prop="name">
              <el-input placeholder="请输入姓名" v-model="searchDate.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" >
            <div class="search_col">
              <el-button type="primary" size="mini" icon="el-icon-search">搜索</el-button>
              <el-button type="primary" size="mini" icon="el-icon-refresh" @click="resetForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-button icon="el-icon-plus" type="primary" size="mini" @click="addDialogVisible = true">新增用户</el-button>
      <el-button icon="el-icon-lock" type="primary" size="mini" @click="resetForm">重置密码</el-button>
      <el-table 
        :data="user"
        border
        stripe
        style="width: 100%"
        :row-class-name="tableRowClassName"
        ref="refTable"
        :header-cell-style="{
        'background-color': '#CBD9EC',
        color: '#4D4A45',
        'font-size': '12px',
        'font-weight': '700',
      }"
      @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="account" label="登录账号" width="160"></el-table-column>
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="mobile" label="手机" width="160"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="160"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" icon="el-icon-setting" @click="showSetRighDialog(scope.row)">分配角色</el-button>
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="showDeleteDialog(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.mount"
        :page-sizes="[1, 3, 6, 10]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 新增用户弹框 -->
    <el-dialog
    title="新增用户信息"
    :visible.sync="addDialogVisible"
    width="50%">
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="登录账号" prop="account">
          <el-input v-model="addForm.account"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分配权限弹框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="setRightDialogVisible"
      width="50%"
      @close="setRightDialogClosed">
      <el-tree :data="rightslist" :props="treeProps" 
      show-checkbox node-key="id" default-expand-all
      :default-checked-keys="defkeys" ref="treeRef"></el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="setRightDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="allotRights">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改用户信息 -->
    <el-dialog
    title="修改用户信息"
    :visible.sync="editDialogVisible"
    width="50%">
      <el-form :model="editForm" :rules="eidtFormRules" ref="editFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="登录账号" prop="account">
          <el-input v-model="editForm.account"  disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="allotEditUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
 data () {
   return {
      // 搜索数据
      searchDate: {
        account: '',
        name: '',
      },

      // 用户数据
      user: [
        {
          id: 1,
          account: '1111',
          name: '姓名',
          mobile: '13813142020',
          email: '111@qq.com'
        },
        {
          id: 2,
          account: '2222',
          name: '姓名',
          mobile: '13813142021',
          email: '222@qq.com'
        }
      ],

      // 分页数据
      page: {
        // 每页显示几条数据
        size: 6,
        // 当前页码值
        mount: 0,
      },
      // 总数据条数
      total: 6,

      // 新增弹框数据区域
      // 控制新增弹框的显示与隐藏
      addDialogVisible: false,
      // 新增弹框数据
      addForm: {
        account: '',
        name: '',
        mobile: '',
        email: ''
      },
      // 新增弹框表单验证规则
      addFormRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      },

      // 存储选中的数据
      checkboxList: [],

      // 控制分配角色弹框的显示与隐藏
      setRightDialogVisible: false,
      // 所有角色数据
      rightslist: [
        {
          id: 110,
          authName: '角色1',
          path: null,
        },
        {
          id: 210,
          authName: '角色2',
          path: null
        },
        {
          id: 310,
          authName: '角色3',
          path: null
        },
      ],
      // 树形控件的属性绑定对象
      treeProps: {
        label: 'authName',
        children: '',
      },
      // 默认选中的节点 id值 数组
      defkeys: [],


      // 修改弹框数据区域
      // 修改数据
      editForm: {},
      // 控制修改弹框的显示与隐藏
      editDialogVisible: false,
      // 修改弹框表单的验证规则对象
      eidtFormRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      },
   }
 },
 methods: {
  // 隔行变色
  tableRowClassName({ row, rowIndex }) {
    if (rowIndex === 1) {
      return 'warning-row'
    } else if (rowIndex === 3) {
      return 'success-row'
    }
    return ''
  },
  
  // 重置事件
  resetForm() {
    this.searchDate.account = '';
    this.searchDate.name = '';
  },

  // 每页数据显示条数改变时触发
  handleSizeChange(newSize) {
    console.log(newSize)
  },
  // 页码值发生改变时触发
  handleCurrentChange(newPage) {
    console.log(newPage)
  },

  // 点击 新增用户弹框的确定事件
  addUser() {
    this.$refs.addFormRef.validate(valid => {
      // 验证规则是否通过
      if(!valid) return;

      // 发起请求

      // 添加弹框隐藏
      this.addDialogVisible = false
    })
  },

  // 全选
  handleSelectionChange(val) {
    this.checkboxList = val;
    console.log(this.checkboxList);
  },

  // 重置密码
  async resetForm() {
    const confirmResult = await this.$confirm('此操作将重置密码, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).catch(err => err);
    // console.log(confirmResult);

    // confirmResult 等于 confirm 则表示点击了删除
    if(confirmResult != 'confirm') {
      return this.$message.info('已经取消删除！');
    }

    // 发送请求

    // 更新角色列表
  },

  // 展示分配权限弹框
  showSetRighDialog(row) {
    console.log(row);
    // 递归获取角色权限的节点 id
    this.getLeafkeys(row, this.defkeys);
    console.log(this.defkeys);
    this.setRightDialogVisible = true;
  },
  // 通过递归的形式，获取角色下的权限 id，并保存到 defkeys 数组中
  getLeafkeys(node, arr) {
      return arr.push(node.id);
  },

  // 监听分配权限弹框的显示与隐藏
  setRightDialogClosed() {
    this.defkeys = [];
  },
  // 点击 角色分配确认按钮
  allotRights() {
    const keys = [
      ...this.$refs.treeRef.getCheckedKeys(),
      ...this.$refs.treeRef.getHalfCheckedKeys()
    ];
    console.log(keys);
    const idStr = keys.join(',');
    console.log(idStr);
    // 发起请求
  },

  // 修改用户信息
  showEditDialog(row) { 
    // 将对应行的数组数据 转换成 对象数据
    this.editForm = Object.assign({}, row);
    // console.log(this.editForm);
    this.editDialogVisible = true;
  },
  // 点击修改弹框的确认事件
  allotEditUser() {
    this.$refs.editFormRef.validate(valid => {
      // 是否符合验证规则
      if(!valid) return;

      // 发送请求

      // 刷新数据

      // 隐藏弹框
      this.editDialogVisible = false;
    })
  },

  // 根据id删除用户
  async showDeleteDialog(id) {
      // console.log(id);
      const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
      }).catch(err =>err);
      // console.log(confirmResult);

      // confirmResult 等于 confirm 则表示点击了删除
      if(confirmResult != 'confirm') {
        return this.$message.info('已经取消删除！');
      }

      // 发送请求

      // 更新角色列表
  },
 }
}
</script>

<style>
.user{
    padding: 20px;
}
.demo-ruleForm-row{
  height: 42px !important;
}
.search_col {
  width: 100%;
  height: 100%;
  margin-top: 7px;
  margin-left: 30px;
}
</style>